<template>
  <div class="wrap-container sn-container"> 
    <div class="sn-content"> 
      <div class="sn-title">设备状态总览</div> 
      <div class="sn-body" style="bottom: 20px"> 
        <div class="wrap-container body">
          <!-- <div v-for="(item,index) in tableData" :key="index" class="part">
            <div class="title" :style="{'color':color[index]}">{{item.status}}:</div><div class="DIGITALDREAMFAT">{{item.count}}</div>
          </div> -->
          <div class="chartsdom" id="chart_deviceStatus"></div>
        </div> 
      </div> 
    </div>   
  </div>
</template>

<script>

import echarts from 'echarts'
export default {
  name: "deviceStatus",
  components: {
    
  },
  data() {
    return {
      timer: null,
      // color:['rgba(14,109,236', 'rgba(100,255,249', 'rgba(255,168,17', 'rgba(218,111,227'],
      tableData: []
    }
  },
  created() {
   
  }, 
  props: {
    time: {
      type: Number,
      default: 60000
    },
  },
  mounted() {
    this.getData();
    if(this.timer){
      clearInterval(this.timer)
    }else{
      this.timer=setInterval(()=>{
        this.getData()
      },this.time)
    }

  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    getData() {
      const u = '/reception/bigScreen/queryDeviceStatus';
      this.$axios.get(u,{headers:{'cloud-Auth-Token': localStorage.getItem('cloud-Auth-Token')}})
      .then((res)=>{
        if(res.data.code == 200){
          this.tableData =  res.data.data;
          this.getEchart();
        }else{
          this.$message.error('暂无数据');
        };
      }).catch((err)=>{
          console.log(err);
      });
    },



    getEchart() {
      // 实例化对象
      let myChart = echarts.init(document.getElementById('chart_deviceStatus'));
   
      let cityList = [];
      let cityData = [];
      let color = [];
      for(let i=0;i<this.tableData.length;i++){
        if(this.tableData[i].status == '正常'){
          cityList.push(this.tableData[i].status)
          cityData.push(this.tableData[i].count)
          color.push('rgba(14,109,236')
        }
        if(this.tableData[i].status == '告警'){
          cityList.push(this.tableData[i].status)
          cityData.push(this.tableData[i].count)
          color.push('rgba(100,255,249')
        }
        if(this.tableData[i].status == '离线'){
          cityList.push(this.tableData[i].status)
          cityData.push(this.tableData[i].count)
          color.push('rgba(255,168,17')
        }
        if(this.tableData[i].status == '未注册'){
          cityList.push(this.tableData[i].status)
          cityData.push(this.tableData[i].count)
          color.push('rgba(218,111,227')
        }
        
      }


      let top10CityList = cityList;
      let top10CityData = cityData;

      let lineY = [];
      for (let i = 0; i < cityList.length; i++) {
        let x = i
        if (x > color.length - 1) {
          x = color.length - 1
        }
        let data = {
          name: cityList[i],
          color: color[x] + ')',
          value: top10CityData[i],
          itemStyle: {
            normal: {
              show: true,
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                offset: 0,
                color: color[x] + ', 0.6)'
              }, {
                offset: 1,
                color: color[x] + ', 1)'
              }], false),
              barBorderRadius: 10
            },
            emphasis: {
              shadowBlur: 15,
              shadowColor: 'rgba(0, 0, 0, 0.1)'
            }
          }
        }
        lineY.push(data)
      }  

      // 指定配置和数据
      let option = {
        color: color,
        tooltip: {
          trigger: 'item',
        },
        grid: {
          borderWidth: 0,
          top: '5%',
          left: '2%',
          right: '2%',
          bottom: '0%',
          containLabel: true
        },
        xAxis: [{
          type: 'value',
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisLabel: {
            show: false
          }
        }],
        yAxis: [{
          type: 'category',
          inverse: true,
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: true,
            inside: false,
            textStyle: {
              color: '#b3ccf8',
              fontSize: 16
            },
          },
          data: top10CityList
        }, {
          type: 'category',
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: true,
            inside: false,
            textStyle: {
              color: '#b3ccf8',
              fontSize: 16,
              fontFamily: 'DIGITALDREAMFAT'

            },
            formatter: (val) => {
              return `${val}`
            }
          },
          splitArea: {
            show: false
          },
          splitLine: {
            show: false
          },
          data: top10CityData.reverse()
        }],
        series: [{
          name: '',
          type: 'bar',
          zlevel: 2,
          barWidth: '10px',
          data: lineY,
          animationDuration: 1500,
          label: {
            normal: {
              color: '#b3ccf8',
              show: false,
              position: [0, '-15px'],
              textStyle: {
                fontSize: 13
              },
              formatter: (a, b) => {
                return a.name;
              }
            }
          }
        }]
      };

      // 把配置给实例对象
      myChart.setOption(option, true);
      window.addEventListener('resize', () => {
        myChart.resize();
      });
    },
  }
};
</script>

<style lang="less" scoped>
@font-face {
font-family: 'DIGITALDREAMFAT';
src: url('../../assets/ttf/DIGITALDREAMFAT.ttf');
}
 
.DIGITALDREAMFAT {
    font-family: 'DIGITALDREAMFAT';
    letter-spacing: 5px;
    margin-left: 20px;
}
// .body {
//   padding: 20px;
//   box-sizing: border-box;
//   display: flex;
//   flex-direction: column;
//   justify-content: space-around;
// }
// .part {
//   width: 100%;
//   font-size: 24px;
//   margin-bottom: 10px;
//   display: flex;
//   color: #fff;
//   .title {
//     width: 100px;
//     text-align: right;
//   }
// }

.chartsdom {
    width: 100%;
    height: 95%;
  }
</style>
